import request from '@/request/index';
<template>
  <v-card flat tile outlined>
    <div class="d-flex flex-column py-3 px-4 subtitle-2">
      <div class="d-flex align-center mb-2">
        <span v-text="data.name"></span>
        <span class="ml-2" v-text="data.tel"></span>
        <v-btn
          v-if="data.defaultStatus === 1"
          class="ml-8"
          x-small
          outlined
          color="#FD994B"
          >默认</v-btn
        >
      </div>
      <div class="subtitle-2" v-text="fullAddress"></div>
    </div>
    <v-divider></v-divider>
    <div class="d-flex justify-space-between align-center py-2 px-4 subtitle-2">
      <div @click="updateDefaultStatus(data)">
        <v-icon
          size="18"
          :color="data.defaultStatus === 1 ? '#2AB795' : ''"
          v-text="
            data.defaultStatus === 1 ? 'mdi-check-circle' : 'mdi-radiobox-blank'
          "
        ></v-icon>
        <span class="ml-2">设为默认</span>
      </div>
      <div class="d-flex align-center">
        <div
          @click="$router.push(`/addresses/form?id=${data.id}`)"
          class="d-flex align-center mr-3"
        >
          <v-icon size="20">mdi-square-edit-outline</v-icon>
          <span>编辑</span>
        </div>
        <div @click="deleteAddressInfo(data)" class="d-flex align-center">
          <v-icon size="20">mdi-trash-can-outline</v-icon>
          <span>删除</span>
        </div>
      </div>
    </div>
  </v-card>
</template>

<script>
import request from '@/request/index.ts';

export default {
  name: 'address-info',
  props: ['data'],
  methods: {
    updateDefaultStatus(data) {
      if (data.defaultStatus === 1) return;
      request
        .put(`/userReceiveAddress/${data.id}`, {
          defaultStatus: 1
        })
        .then(() => {
          this.$emit('onUpdateAddressInfo');
        });
    },
    deleteAddressInfo(data) {
      request.delete(`/userReceiveAddress/${data.id}`).then(() => {
        this.$emit('onUpdateAddressInfo');
      });
    }
  },
  computed: {
    fullAddress() {
      return (
        this.data.province +
        this.data.city +
        this.data.region +
        this.data.detailAddress
      );
    }
  }
};
</script>
